<template>
  <view class="center-change-container">
    <!-- 自定义导航栏 -->
    <navigation-bar status-bg-color="#F0F0F0" navigation-bg-color="#F0F0F0">
      <navigator class="top-left-navigator iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        切换圈子
      </view>
    </navigation-bar>
    <!-- 内容主体 -->
    <view class="change-main-wapper" :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px)`}">
      <!-- 搜索框 -->
      <view class="header-search iconfont">
        <u-search shape="round" bgColor="#FFF" placeholder="搜索您的学校圈" searchIconColor="#00000080" searchIconSize="48rpx"
          :clearabled="false" maxlength="20" placeholderColor="#00000080" searchIcon="/static/search.png" height="66rpx"
          :showAction="true" actionText="搜索" :actionStyle="{color: '#000', 'font-size': '28rpx'}" @search="onSearch"
          @custom="onSearch"></u-search>
      </view>
      <!-- 搜索结果 -->
      <view class="search-result current-cc-panel" v-if="isSearch">
        <view class="cc-title-hd">
          搜索结果
        </view>
        <view class="cc-contain-bd">
          <view class="left-avatar">
            <image src="/static/school (1).png" style="width: 96rpx;height: 96rpx;" mode="aspectFill"></image>
          </view>
          <view class="right-name">
            {{searchResult}}
          </view>
        </view>
      </view>
      <!-- 当前的校园圈子 -->
      <view class="current-cc-panel">
        <view class="cc-title-hd">
          当前所选的Campus circle
        </view>
        <view class="cc-contain-bd">
          <view class="left-avatar">
            <image src="/static/school (1).png" style="width: 96rpx;height: 96rpx;" mode="aspectFill"></image>
          </view>
          <view class="right-name">
            长春理工大学圈
          </view>
        </view>
        <view class="fetch-again-icon">
          重新获取
        </view>
      </view>
      <!-- 附近的校园圈子 -->
      <view class="near-cc-panel" :style="{height: `calc(100% - ${isSearch ? '550rpx' : '330rpx'})`}">
        <view class="nearcc-title-hd">
          附近的Campus circle
        </view>
        <view class="nearcc-contain-bd">
          <scroll-view class="nearcc-list" :scroll-y="true">
            <!-- 每一个附近校园 -->
            <view class="nearcc-item" v-for="i in 7" :key="i">
              <view class="left-avatar">
                <image src="/static/school (1).png" style="width: 96rpx;height: 96rpx;" mode="aspectFill"></image>
              </view>
              <view class="right-name">
                长春理工大学圈
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        isSearch: false,
        searchResult: ''
      };
    },
    methods: {
      onSearch: function() {
        this.isSearch = true
        this.searchResult = '长春理工大学圈'
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    background-color: #F0F0F0;
  }

  .center-change-container {
    height: 100%;

    .top-left-navigator {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      font-size: 16px;
      line-height: 16px;
      color: #000;
    }

    .top-title-bar {}

    .change-main-wapper {
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 10rpx;
      width: 100%;

      .header-search {
        display: flex;
        align-items: center;
        width: 100%;
        height: 70rpx;
        margin-top: 20rpx;

        .u-search__content__input {
          font-size: 28rpx;
          margin-left: 30rpx;
        }

        .u-search__action--active {
          width: 80rpx;
        }
      }

      .current-cc-panel {
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 200rpx;
        background-color: #FFF;
        margin-top: 20rpx;
        padding: 14rpx 20rpx;
        border-radius: 18rpx;
        font-size: 28rpx;
        font-weight: 600;

        .cc-contain-bd {
          display: flex;
          align-items: center;
          margin-top: 30rpx;

          .right-name {
            margin-left: 30rpx;
          }
        }

        .fetch-again-icon {
          position: absolute;
          top: 10rpx;
          right: 20rpx;
          display: flex;
          align-items: center;

          &::before {
            content: "\e65e";
            font-family: 'iconfont';
            margin-right: 6rpx;
            font-size: 40rpx;
          }
        }
      }

      .near-cc-panel {
        box-sizing: border-box;
        background-color: #FFF;
        border-radius: 18rpx;
        width: 100%;
        margin-top: 20rpx;
        padding: 36rpx 20rpx;
        font-size: 28rpx;
        font-weight: 600;

        .nearcc-title-hd {
          width: 100%;
          line-height: 42rpx;
        }

        .nearcc-contain-bd {
          width: 100%;
          height: calc(100% - 78rpx);
          margin-top: 36rpx;

          .nearcc-list {
            overflow: hidden;
            height: 100%;

            .nearcc-item {
              display: flex;
              align-items: center;
              margin-top: 36rpx;

              &:first-child {
                margin-top: 0;
              }

              .right-name {
                margin-left: 30rpx;
              }
            }
          }
        }
      }
    }
  }
</style>